// 侧边弹窗组件
class SidePopup {
    state = false;

    constructor(options) {
        this.options = {
            width: 350,
            position: 'right',
            isExpanded: false, // 默认初始化为隐藏状态
            ...options
        };

        this.container = null;
        this.sidebar = null;
        this.toggleBtn = null;
        this.iframe = null;

        this.initialize();
    }

    initialize() {
        this.createContainer();
        this.createSidebar();
        this.createToggleButton();
        this.createIframe();
        this.attachEvents();
    }

    createContainer() {
        this.container = document.createElement('div');
        this.container.className = 'side-popup-container';

        if (this.options.position === 'right') {
            this.container.style.right = '0';
        } else {
            this.container.style.left = '0';
        }
    }

    createSidebar() {
        this.sidebar = document.createElement('div');
        this.sidebar.className = 'side-popup-sidebar';
        this.sidebar.style.width = `${this.options.width}px`;

        // 根据初始状态设置侧边栏位置
        if (this.options.isExpanded) {
            this.sidebar.style.transform = 'translateX(0)';
        } else {
            const translateX = this.options.position === 'right' ? '100%' : '-100%';
            this.sidebar.style.transform = `translateX(${translateX})`;
        }

        if (this.options.position === 'right') {
            this.sidebar.style.right = '0';
        } else {
            this.sidebar.style.left = '0';
        }

        this.container.appendChild(this.sidebar);
    }

    createToggleButton() {
        this.toggleBtn = document.createElement('div');
        this.toggleBtn.className = 'side-popup-toggle-btn';

        const icon = document.createElement('div');
        icon.className = 'side-popup-icon';

        // 根据初始状态设置箭头方向
        if (this.options.isExpanded) {
            // 展开状态下，按钮箭头向右（指向收起方向）
            icon.className += ' side-popup-icon-right';
            icon.innerHTML = '&#9654;';

            const translateX = this.options.position === 'right' ? `-${this.options.width}` : this.options.width;
            this.toggleBtn.style.transform = `translateX(${translateX}px)`;
        } else {
            // 收起状态下，按钮箭头向左（指向展开方向）
            icon.className += ' side-popup-icon-left';
            icon.innerHTML = '&#9664;';

            this.toggleBtn.style.transform = 'translateX(0)';
        }

        // 调整按钮位置，确保整个按钮可见
        if (this.options.position === 'right') {
            this.toggleBtn.style.left = '-20px';
        } else {
            this.toggleBtn.style.right = '-20px';
        }

        this.toggleBtn.appendChild(icon);
        this.container.appendChild(this.toggleBtn);
    }

    createIframe() {
        const contentContainer = document.createElement('div');
        contentContainer.className = 'side-popup-content';

        const iframeContainer = document.createElement('div');
        iframeContainer.className = 'side-popup-iframe-container';

        this.iframe = document.createElement('iframe');
        this.iframe.className = 'side-popup-iframe';
        this.iframe.src = this.options.src;
        this.iframe.sandbox = 'allow-same-origin allow-scripts';

        iframeContainer.appendChild(this.iframe);
        contentContainer.appendChild(iframeContainer);
        this.sidebar.appendChild(contentContainer);
    }

    attachEvents() {
        this.toggleBtn.addEventListener('click', () => this.toggleSidebar());

        window.addEventListener('resize', () => this.handleResize());
    }

    toggleSidebar() {
        this.options.isExpanded = !this.options.isExpanded;

        if (this.options.isExpanded) {
            // 展开侧边栏
            this.sidebar.style.transform = 'translateX(0)';
            const translateX = this.options.position === 'right' ? `-${this.options.width}` : this.options.width;
            this.toggleBtn.style.transform = `translateX(${translateX}px)`;

            setTimeout(() => {
                const icon = this.toggleBtn.querySelector('.side-popup-icon');
                // 展开状态下，按钮箭头向右（指向收起方向）
                icon.className = 'side-popup-icon side-popup-icon-right';
                icon.innerHTML = '&#9654;';
            }, 300);
        } else {
            // 收起侧边栏
            const translateX = this.options.position === 'right' ? '100%' : '-100%';
            this.sidebar.style.transform = `translateX(${translateX})`;
            this.toggleBtn.style.transform = 'translateX(0)';

            setTimeout(() => {
                const icon = this.toggleBtn.querySelector('.side-popup-icon');
                // 收起状态下，按钮箭头向左（指向展开方向）
                icon.className = 'side-popup-icon side-popup-icon-left';
                icon.innerHTML = '&#9664;';
            }, 300);
        }
    }

    handleResize() {
        if (window.innerWidth < 768 && this.options.isExpanded) {
            this.toggleSidebar();
        }
    }

    show() {
        this.state = true;
        document.body.appendChild(this.container);
    }

    hide() {
        this.state = false;
        document.body.removeChild(this.container);
    }
}


const sidePopup = new SidePopup({
    width: 350,
    position: 'right',
    isExpanded: false,
    src: chrome.runtime.getURL('index.html'),
});


chrome.storage.session.get('toggleState').then((result) => {
    const state = result.toggleState;
    if (state === true) {
        sidePopup.show();
    }
});


chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    const {data:state, action} = message;
    if (action === 'stateChanged') {
        if (state && !sidePopup.state) {
            sidePopup.show();
        }else if (!state && sidePopup.state) {
            sidePopup.hide();
        }
        sendResponse(state);
    }
});